<template>
  <div class="search">
    <el-form ref="queryFormRef" :inline="true" onsubmit="event.preventDefault()">
      <el-form-item label="关键字" prop="keywords">
        <el-input placeholder="部门名称" clearable v-model="input.keyWord" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.stop="search">搜索</el-button>
        <el-button @click=""> 重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-card shadow="never">
    <template #header>
      <el-button type="success" @click.stop="add(undefined)">新增</el-button>
      <el-button type="danger" v-show="false">删除</el-button>
    </template>

    <el-table :data="depts" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
      <el-table-column prop="name" label="部门名称" sortable width="400" />
      <el-table-column prop="treePath" label="部门路径" min-width="auto" />
      <el-table-column label="状态" align="center" width="150">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0" type="success">正常</el-tag>
          <el-tag v-else type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" sortable width="100" />

      <el-table-column fixed="right" align="center" label="操作" width="240">
        <template #default="scope">
          <el-button type="primary" text size="small" @click.stop="add(scope.row.parentId)">
            新增
          </el-button>
          <el-button type="primary" text size="small" @click.stop="edit(scope.row)">
            编辑
          </el-button>
          <el-button type="primary" text size="small" @click.stop="deleteDept(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="dialogModel.dialogVisible" :title="dialogModel.title" :width="500">
    <el-form label-width="100px" :model="dept" :rules="rules" ref="ruleFormRef">
      <el-form-item label="上级部门" prop="parentId">
        <el-tree-select placeholder="选择上级部门" filterable check-strictly :render-after-expand="false" default-expand-all
          :data="treeSelectNodes" v-model="dept.parentId" clearable />
      </el-form-item>

      <el-form-item label="部门名称" prop="name">
        <el-input placeholder="请输入部门名称" v-model="dept.name" />
      </el-form-item>

      <el-form-item label="状态" v-if="true">
        <el-radio-group v-model="dept.status">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="排序:" prop="sort">
        <el-input-number style="width: 100px" controls-position="right" :min="0" v-model="dept.sort" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click.stop="commit">确 定</el-button>
        <el-button @click.stop="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import { IDept, IDeptTree, IDeptInput, getRules } from "@/api/dept/type"
import { addSysDept, deleteSysDept, getSysDept, updateDept, deptsConvert } from "@/api/dept/index"
import { ConfirmDialog, ISelectTreeNode, validateForm } from "@/utils/common"
import { Dialog } from "@/utils/dialog"
import { ElMessage } from "element-plus"
import type { FormInstance } from 'element-plus'

// 部门列表
const depts = ref<IDeptTree[]>([]);
// 部门结构
const dept = reactive<IDept>({
  sort: 0,
  status: 0,
});
// 部门输入
const input = reactive<IDeptInput>({
  keyWord: "",
  status: 0,
});
// 弹窗viewModel
const dialogModel = reactive(new Dialog());
// 部门选择
const treeSelectNodes = ref<ISelectTreeNode[]>([]);
// 验证规则
const rules = getRules();
// 表单实例
const ruleFormRef = ref<FormInstance | null>(null)

const search = async () => {
  let data = await getSysDept(input);
  depts.value = data.data;
  treeSelectNodes.value = deptsConvert(data.data);
}
search();

const add = (parentId: number | undefined) => {
  dialogModel.show("新增");

  dept.id = 0;
  dept.name = "";
  dept.treePath = "";
  dept.sort = 0;
  dept.status = 0;
  dept.parentId = parentId;
}
const edit = (d: IDeptTree) => {
  dialogModel.show("编辑");

  dept.id = d.id;
  dept.parentId = d.parentId;
  dept.name = d.name;
  dept.treePath = d.treePath;
  dept.status = d.status;
  dept.sort = d.sort;
}
const deleteDept = (id: number) => {
  ConfirmDialog("确认删除?",
    async () => {
      await deleteSysDept([id]);
      await search();
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    },
    () => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      });
    });
}

const commit = () => {
  validateForm(ruleFormRef).then(async () => {
    if (dialogModel.title == "编辑") {
      await updateDept(dept);
    }
    else if (dialogModel.title == "新增") {
      await addSysDept(dept);
    }
    await search();
    closeDialog();
  })
}
const closeDialog = () => {
  dialogModel.close();
}
</script>